<template>
  <div>
    <el-button @click="add">添加</el-button>
    <el-table :data="tableData.data">
      <el-table-column prop="shopName" label="商品名称"></el-table-column>
      <el-table-column prop="shopAddress" label="商品地址"></el-table-column>
      <el-table-column prop="shopTel" label="商品电话"></el-table-column>
      <el-table-column prop="shopImage" label="图片">
        <template #default="{ row }">
          <img style="width: 80px; height: 80px" :src="row.shopImage" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="del(row.id)">删除</el-button>
          <el-button @click="bj(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="pageCode"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :background="true"
      layout="sizes, prev, pager, next"
      :total="100"
      @change="getlist"
    />

    <el-dialog v-model="show" title="添加/编辑">
      <el-form v-model="forData">
        <el-form-item label="商品名称">
          <el-input v-model="forData.shopName"></el-input>
        </el-form-item>
        <el-form-item label="商品地址">
          <el-input v-model="forData.shopAddress"></el-input>
        </el-form-item>
        <el-form-item label="商品电话">
          <el-input v-model="forData.shopTel"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-input v-model="forData.shopImage"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="ok">确定</el-button>
          <el-button @click="show = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import axios from 'axios'
const pageCode = ref(1)
const pageSize = ref(10)
const show = ref(false)
const index = ref(true)
const tableData = reactive({
  data: [],
  total: 0
})

const searchValue = ref('')

const sou = ref({
  searchValue: ''
})

const forData = ref({
  shopName: '',
  shopAddress: '',
  shopTel: '',
  shopImage: ''
})

const bj = (row: any) => {
  show.value = true
  index.value = false
  forData.value = row
}

const add = () => {
  show.value = true
  index.value = true
  forData.value = {
    shopName: '',
    shopAddress: '',
    shopTel: '',
    shopImage: ''
  }
}

const ok = async () => {
  if (index.value) {
    console.log('添加')
    await axios.put('/api/list', forData.value)
  } else {
    console.log('编辑')
    await axios.post('/api/list', forData.value)
  }
  show.value = false
  alert('操作成功')
  await getlist()
}

const del = async (id: string) => {
  const res = await axios.delete('/api/list?id=' + id)
  console.log(res.data)
  alert('删除成功')
  await getlist()
}

const getlist = async () => {
  const res = await axios.get('/api/list', {
    params: {
      pageCode: pageCode.value,
      pageSize: pageSize.value,
      ...sou.value
    }
  })
  console.log(res.data)
  const { data, total } = res.data.data
  tableData.data = data
  tableData.total = total
}
getlist()
</script>